<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="box">
        <div class="smallBox">
            <div class="mask"></div>
            <img src="./img/cw1.png" alt="">
        </div>

        <div class="bigBox">
            <img src="./img/cw1.png" alt="">
        </div>
    </div>

    <script>
        let masr = document.querySelector(".mask");
        let box = document.querySelector(".box");
        let bigBox = document.querySelector(".bigBox");
        let bigBoximg = document.querySelector(".bigBox>img");
        let smallBox = document.querySelector(".smallBox");
        box.addEventListener("mouseover", function (e) {
            masr.style.display = "block";
            bigBox.style.display = "block";
        })
        smallBox.addEventListener("mouseleave", function (e) {
            masr.style.display = "none";
            bigBox.style.display = "none";
        })

        smallBox.addEventListener("mousemove", function (e) {
            let x = e.clientX - masr.offsetWidth / 2 - 490;
            let y = e.clientY - masr.offsetHeight / 2 - 50;
            let x1 = -(e.clientX - masr.offsetWidth - 450);
            let y1 =- (e.clientY - masr.offsetHeight  +200);

            //横坐标的最小值
            x = x < 0 ? 0 : x;
            //纵坐标的最小值
            y = y < 0 ? 0 : y;
            //横坐标最大值
            x = x > smallBox.offsetWidth - masr.offsetWidth ? smallBox.offsetWidth - masr.offsetWidth : x;
            //纵坐标最大值
            y = y > smallBox.offsetHeight - masr.offsetHeight ? smallBox.offsetHeight - masr.offsetHeight : y;

            masr.style.transform = `translate(${x}px,${y}px)`
            bigBoximg.style.transform=`translate(${x1}px,${y1}px)`
        })
    </script>
</body>

</html>